<style>
label{
	text-align:right;
}
#map-canvas { height: 400px; max-width: 1366px; }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<script type="text/javascript">
	var locations = [
		<?php foreach($titik as $row){?>
			['#', <?php echo $row["LATITUDE"];?> , <?php echo $row["LONGTITUDE"]?>],
		<?php }?>
	];

	function initialize()
	{	
		var mapOptions = {
			zoom: 6,
			center: new google.maps.LatLng(-3.247600, 129.352790),
		};

		var map = new google.maps.Map(document.getElementById('map-canvas'),
		  mapOptions);

		var flightPlanCoordinates = [
			<?php foreach($titik as $row){?>
			new google.maps.LatLng(<?php echo $row["LATITUDE"];?>, <?php echo $row["LONGTITUDE"];?>),
			<?php }?>
			
		];
		var flightPath = new google.maps.Polyline({
			path: flightPlanCoordinates,
			geodesic: true,
			strokeColor: '#FF0000',
			strokeOpacity: 1.0,
			strokeWeight: 2
		});
		
		var infowindow = new google.maps.InfoWindow();
 
		var marker, i;
		var markers = new Array();
	 
		for (i = 0; i < locations.length; i++) {  
			marker = new google.maps.Marker({
				position: new google.maps.LatLng(locations[i][1], locations[i][2]),
				map: map
			});
	 
			markers.push(marker);
		}

		flightPath.setMap(map);
	}
	
	google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4>
					<span>Titik Rute : <?php echo $ruas["NAMA_RUAS"]?></span>
				</h4>
			</div>
			<div class="panel-body">
				
				<div class="col-lg-12">
					<div class="col-lg-12">
						<p>Koordinat :</p>
						<ul>
							<?php foreach($titik as $row){?>
								<li><?php echo $row["LATITUDE"];?> , <?php echo $row["LONGTITUDE"]?></li>
							<?php }?>
						</ul>
					</div>
					
				</div>
				
				
				<div class="col-lg-12">
					<div class="col-lg-12">
						<div class="col-lg-12">
							<div class="panel-heading">
								<h4>
									<span>Maps</span>
								</h4>
							</div>
							<div class="panel-body">
								<div class="form-group">
									<div class="col-lg-12">
										<div id="map-canvas"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</div>